<template>
  <div>
    <pt-table
      :columns="columns"
      :dataSource="tableData"
      :options="options"
      :fetch="getTableList"
      :pagination="pagination" />
    <el-dialog :title="from.type ? `修改${typeList[from.type - 1].name}协议` : ''" v-dialogDrag
               :visible.sync="dialogTableVisible" :modal="false" :close-on-click-modal="false" width="434px" height="800px">
      <el-form :model="from" ref="ruleForm" label-position="top">
        <el-form-item prop="context" v-if="dialogTableVisible"
                      :rules="[{ required: true, message: '未编辑模板', trigger: 'change'}]">
          <vue-html5-editor  class="goods-disc" :content="from.context"  @change="updateData" />
        </el-form-item>
      </el-form>
      <span slot="footer" style="text-align: right;">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" v-loading="submitLoading" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  var typeList = [
    { name: '商家入驻', value: 1 },
    {name: '骑手申请', value: 2 },
    { name:'用户', value: 3 },
  ]
  import { protocolList, protocolUpdate } from '@/api/agent'
  export default {
    data() {
      return {
        typeList: typeList,
        columns: [ // 表单配置
          { prop: "name", label: "代理商名称", minWidth: 100, align: "left" },
          {
            label: "商家入驻", minWidth: 120, align: "left",
            render: row => {
              return <span>{row.protocols.findIndex(i => i.type === 1) > -1 ? '已添加' : '未添加'} </span>;
            }
          },
          {
            label: "骑手申请", minWidth: 120, align: "left",
            render: row => {
              return <span>{row.protocols.findIndex(i => i.type === 2) > -1 ? '已添加' : '未添加'} </span>;
            }
          },
          {
            label: "用户协议", minWidth: 120, align: "left",
            render: row => {
              return <span>{row.protocols.findIndex(i => i.type === 3) > -1 ? '已添加' : '未添加'} </span>;
            }
          },
          { button: true, label: "操作", width: 120, fixed: 'right',
            group: [
              {
                name: "查看/修改协议", type: "text", isOption: true,
                optionsBtn: typeList,
                onClick: (row, index, value) => this.handleClick(row, value)
              },
            ]
          }
        ],
        pagination: { total: 0, page: 0, size: 10, curPage: 1 }, // 分页
        options: { // 表单外观
          mutiSelect: false, //  多选则 mutiSelect
          index: false, // 显示序号
          loading: false, // 表格动画
          initTable: true // 是否一挂载就加载数据
        },
        tableData: [], //表单数据
        curOrderlist: {}, //修改 选择数据
        dialogTableVisible: false, // 修改协议等待
        submitLoading: false, // 提交表单等待
        from: {
          agentid: null,
          context: '',
          type: null
        }
      };
    },
    methods: {
      updateData(e = ''){ // 跟新模板
        this.from.context = e
      },
      handleClick(row, type) { //查看/修改订单操作
        this.dialogTableVisible = !this.dialogTableVisible
        const index = row.protocols.findIndex(i => i.type === type)
        this.from = {
          agentid: row.id,
          context: index > -1 ? row.protocols[index].context : '',
          type
        }
        this.$nextTick(() => {
          this.$refs['ruleForm'].resetFields()
        })
      },
      submitForm(formName) { // 提交数据
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.from }
            this.submitLoading = true
            protocolUpdate(params).then(res => {
              if (res.success) {
                this.$message.success('修改成功！')
                this.dialogTableVisible = false
                this.getTableList()
              }
            }).finally(() => { this.submitLoading = false })
          }
        })
      },
      getTableList() { //获取订单数据
        this.options.loading = true
        const params = {}
        params.page = this.pagination.page
        params.size = this.pagination.size
        protocolList(params).then(res => {
          if (res.success) {
            this.tableData = res.data.list
            this.pagination.total = res.data.total
          }
        }).finally(() => { this.options.loading = false })
      }
    }
  }
</script>

<style scoped>

</style>
